<template>
  <div class="user-info">
    <!-- 个人信息 -->
    <el-form label-width="220px">
      <!-- 工号  -->
      <el-row class="inline-info">
        <el-col :span="12">
          <el-form-item label="工号">
            <el-input
              v-model="userInfo.workNumber"
              class="inputW"
            />
          </el-form-item>
        </el-col>
        <!--  入职时间
           1、数据'2018-11-2'->影响视图
           2、试图选择->默认绑定日期对象->v-model变量
           3、 value-format 选择值绑定的格式(默认不写，v-model绑定的是日期对象)
        -->
        <el-col :span="12">
          <el-form-item label="入职时间">
            <el-date-picker
              v-model="userInfo.timeOfEntry"
              style="width: 300px"
              type="date"
              class="inputW"
              value-format
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 姓名 部门 -->
      <el-row class="inline-info">
        <el-col :span="12">
          <el-form-item label="姓名">
            <el-input
              v-model="userInfo.username"
              class="inputW"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门">
            <el-input
              v-model="userInfo.departmentName"
              readonly
              class="inputW"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!--手机 聘用形式  -->
      <el-row class="inline-info">
        <el-col :span="12">
          <el-form-item label="手机">
            <el-input
              v-model="userInfo.mobile"
              readonly
              style="width: 300px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="聘用形式">
            <el-select
              v-model="userInfo.formOfEmployment"
              class="inputW"
            >
              <el-option
                v-for="item in EmployeeEnum.hireType"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 员工照片 -->
      <el-row class="inline-info">
        <el-col :span="12">
          <el-form-item label="员工头像">
            <!-- 放置上传图片 -->
            <upload-img ref="uploadImg" />

          </el-form-item>
        </el-col>
      </el-row>
      <!-- 保存个人信息 -->
      <el-row
        class="inline-info"
        type="flex"
        justify="center"
      >
        <el-col :span="12">
          <el-button
            type="primary"
            @click="saveUser"
          >保存更新</el-button>
          <el-button @click="$router.back()">返回</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getUserPhotoAPI, saveEmployeeAPI } from '@/api'
import EmployeeEnum from '@/api/constant/index.js' // 导入枚举值

export default {
  name: 'UserInfo',
  data() {
    return {
      userInfo: {}, // 个人信息(提前声明属性为了见名知意)
      // 知识点：v-model='userInfo.workNumber'
      // 当输入框有值的时候，如果对象里有这个属性，则赋值
      // 如果对象里没有这个属性，则会添加属性并赋值
      EmployeeEnum // 聘用形式
    }
  },
  created() {
    // 请求个人信息
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      const res = await getUserPhotoAPI(this.$route.query.id)
      this.userInfo = res.data
      this.$refs.uploadImg.imageUrl = res.data.staffPhoto
      // 额外加聘用形式-上面循环的是数字，所以转一下，因为不转是字符串
      // 下面这样写，为何点击页面下来菜单，值不变/视图没变，但是vue数据变了
      // 问题：数据没有驱动视图
      // Vue框架原理：响应式原理
      // Vue内部会检测data里面每个变量，如果变量本身改变了，响应式更新视图
      // 检测userInfo里每个属性(检测到变化，会更新数据+视图)
      // 上面数据劫持已经绑定完毕

      // 走到这句话的时候，数据没有影响视图
      // 给对象后续添加一个属性的时候，不会影响对象本身的响应式触发
      // this.userInfo.formOfEmployment = parseInt(this.$route.query.form)
      // 解决：如果你要后续给对象添加属性 $set
      // $set()是Vue内部提供的一个专门更新数组/对象某个值的方法(并且额外添加数据劫持)
      // 参数1：数组/对象
      // 参数2：下标/属性名
      // 参数3：下标值/属性值
      this.$set(this.userInfo, 'formOfEmployment', parseInt(this.$route.query.form))
    },
    // 保存更新按钮点击事件
    async saveUser() {
      this.userInfo.staffPhoto = this.$refs.uploadImg.imageUrl
      // 把头像地址保存到userInfo一起带给后台
      const res = await saveEmployeeAPI(this.userInfo)
      this.$message.success(res.message)
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped></style>
